
<ui:composition template="../WEB-INF/includes/templates/indexTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:p="http://primefaces.org/ui"
                >

    <ui:define name="content">
        <div align="center">
            <h:form>
                <section class="hero fixed" data-left-factor="0.4" data-max-width-factor="0.7">
                    <div class="hero-image">
                        <img src="/smarttmtiduapp-web/resources/css/images/home.jpg" 
                             style="width: 1435px;height:717.5px;top: -51.25px;left:0px;max-width:100%; opacity: 1;" />
                    </div>
                    <div class="row" style="opacity: 1;">
                        <div class="large-12 columns small-centered">
                            <h1>
                                #{tittles['page.index.tittle1']}
                            </h1>
                        </div>
                    </div>
                    <div class="row subrow" style="opacity: 1;">
                        <div class="large-12 columns small-centered">
                            <h3 class="hide-for-small">
                                #{tittles['page.index.tittle2']}
                            </h3>
                            <br/>
                            <a class="servicios" href="#services"> 
                                <span style="font-family: 'WebSymbolsRegular';font-size:24px;line-height: 1.1em;">S</span>
                                #{labels['page.index.botonservicios']}
                            </a>
                        </div>
                    </div>
                </section>
                <div id="main">
                    <div class="bowtie">
                        <div class="bowtie-dots services">
                        </div>
                    </div>

                    <section  id="services" class="services">
                        <div class="row" data-view="services">
                            <div class="small-11 large-12 small-centered columns">
                                <div class="row">
                                    <div class="columns large-10 large-centered">
                                        <section  class="headline">
                                            <h2 style="height:20px;">
                                                <!--{tittles['page.index.tittleServicios']}-->
                                            </h2>
                                            <h5 class="subheader">
                                                <!--{tittles['page.index.descrpServicios']}-->
                                            </h5>
                                        </section>
                                    </div>
                                </div>
                                <div class="row badges small">
                                    <div class="large-4 columns flush">
                                        <a name="Pague su contribucion"></a>
                                        <h:commandLink  value="" onclick="javascript:window.open('#{properties['page.index.linkEcollect']}');">
                                            <div class="badge contribucion"></div>
                                            <h3 class="text-center" >


                                                #{tittles['page.index.tittleContribucion']}


                                            </h3>
                                            <p class="small-12 large-11 columns small-centered" >
                                                #{tittles['page.index.descrpContribucion']}
                                            </p>
                                        </h:commandLink>
                                    </div>

                                    <div class="large-4 columns flush">

                                        <a name="EstadoCuenta"></a>
                                        <h:commandLink  value="" action="#{sessionControllerBean.navigationURL('userLogin','inquireChipsRegistred','index')}" >
                                            <div class="badge estadocuenta"></div>
                                            <h3 class="text-center" style="font-family:'Open sans';">
                                                #{tittles['page.index.tittleEstadoCuenta']}


                                            </h3>
                                            <p class="small-12 large-11 columns small-centered">
                                                #{tittles['page.index.descrpEstadoCuenta']}
                                            </p>
                                        </h:commandLink>                 

                                    </div>



                                    <div class="large-4 columns flush">

                                        <a name="registre Consulte Devolucion"></a>
                                        <h:commandLink   value="" 
                                                         action="#{sessionControllerBean.navigationURL('userLogin','inquireChipsRegistred','index')}" >
                                            <div class="badge registreconsulte"></div>
                                            <h3 class="text-center" style="font-family:'Open sans';" >
                                                #{tittles['page.index.tittleDevolucion']}

                                            </h3>
                                            <p class="small-12 large-11 columns small-centered">
                                                #{tittles['page.index.descrpDevolucion']}
                                            </p>
                                        </h:commandLink>   
                                    </div>
                                </div>
                                <div class="row badges small">
                                    <div class="large-6 columns flush"  >
                                        <a name="validacion"></a>
                                        <h:commandLink  value=""  onclick="javascript:window.open('#{properties['page.index.linkValidacion']}');">
                                            <div class="badge validacion"></div>
                                            <h3 class="text-center" >
                                                #{tittles['page.index.tittleValidacion']}
                                            </h3>
                                            <p class="small-12 large-11 columns small-centered"  >
                                                #{tittles['page.index.descrpValidacion']}
                                            </p>
                                        </h:commandLink>
                                    </div>
                                    <div class="large-6 columns flush"  >
                                        <a name="publicacion"></a>
                                        <h:commandLink  value="" onclick="javascript:window.open('#{properties['page.index.linkActosAdmin']}');">
                                            <div class="badge publicacion"></div>
                                            <h3 class="text-center">#{tittles['page.index.tittlePublicacion']}</h3>
                                            <p class="small-12 large-11 columns small-centered" >
                                                #{tittles['page.index.descrpPublicacion']}

                                            </p>
                                        </h:commandLink>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="bowtie">
                            <div class="bowtie-dots services">
                            </div>
                        </div>

                    </section>


                </div>

            </h:form>            
        </div>
    </ui:define>
</ui:composition>
